<template>
  <view class="intro-card-container">
    <view class="scene-container" :style="bg_style">
      <view class="action-view">
        <div class="title-div">
          <text @click="clickDismiss" class="close-text">关闭</text>
          <text class="sep">/</text>
          <text class="scene-title">{{ scene_name }}</text>
        </div>
        <image v-if="hasQuestions" @click="clickTest"
          src="https://oss.hkrin.com/other_img/go_test.png" mode="widthFix"></image>
      </view>
      <view class="control" v-if="intros[selected_index].hasAudio">
        <div v-if="audio_on" @click="mute">
          <svg t="1670446976940" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1624" width="24" height="24">
            <path
              d="M844.830112 273.506839a35.713951 35.713951 0 0 0-49.319266 22.808909 45.317702 45.317702 0 0 0 14.305589 47.118406 51.01993 51.01993 0 0 0 10.003907 7.302853 173.967956 173.967956 0 0 1 15.606096 10.003907 186.772958 186.772958 0 0 1-15.806174 312.522079 51.01993 51.01993 0 0 0-10.003908 7.302853 45.417741 45.417741 0 0 0-14.305588 47.118406A35.81399 35.81399 0 0 0 844.830112 750.293083a266.80422 266.80422 0 0 0 0-477.086362zM548.414324 26.610395l-250.097694 218.685424H182.471378A160.062524 160.062524 0 0 0 31.812527 405.358343v222.787026a160.062524 160.062524 0 0 0 160.062524 150.658851h106.741696l250.097695 218.585385 6.402501 5.202032a106.741696 106.741696 0 0 0 170.066432-85.533411V98.538492a106.841735 106.841735 0 0 0-176.769051-71.928097z m96.937867 890.347792a26.710434 26.710434 0 0 1-44.217273 20.007815l-250.097694-218.585385a80.031262 80.031262 0 0 0-52.720594-20.007815H191.875051a80.031262 80.031262 0 0 1-80.031262-80.031262V405.358343a80.031262 80.031262 0 0 1 80.031262-80.031262h106.741696a80.031262 80.031262 0 0 0 52.720594-20.007816l250.097695-218.685424a26.610395 26.610395 0 0 1 44.217272 20.007816z"
              p-id="1625" fill="#ffffff"></path>
          </svg>
        </div>
        <div v-else @click="openSound">
          <svg t="1670447049853" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1892" width="24" height="24">
            <path
              d="M652.569422 94.472586a25.86878 25.86878 0 0 1 17.409787-6.491785 26.262221 26.262221 0 0 1 26.163861 26.262221V529.22546l78.688303 78.688303V114.243022a104.950524 104.950524 0 0 0-173.99951-78.688303L388.176725 221.259114l55.770334 55.770335zM1012.470048 956.798025l-944.259635-944.259634-1.967207-1.967208a39.344151 39.344151 0 1 0-53.704767 57.639182l189.73717 189.63881A157.376606 157.376606 0 0 0 92.800508 407.553671v219.146924a157.376606 157.376606 0 0 0 157.376606 148.13073H355.127637l245.900947 214.917427 6.196704 5.11474a104.950524 104.950524 0 0 0 167.802806-84.098124v-80.360429l181.9667 182.065061a39.344151 39.344151 0 0 0 55.671974-55.671975z m-316.326978-46.032657v4.426217a26.557302 26.557302 0 0 1-6.098343 12.88521 26.163861 26.163861 0 0 1-36.983503 2.459009l-245.900946-214.917427-6.393425-5.11474a78.688303 78.688303 0 0 0-45.442495-14.360615H242.701725a78.688303 78.688303 0 0 1-71.212914-78.688303v-217.376436a78.688303 78.688303 0 0 1 78.688303-71.212915h23.114689l422.949627 422.949628z"
              p-id="1893" fill="#ffffff"></path>
          </svg>
        </div>
      </view>
      <view class="content-box">
        <div>
          <div class="text-content-view" v-if="intros[selected_index].type == 0">
            {{ intros[selected_index].content }}
          </div>
          <div class="image-container" v-if="intros[selected_index].type == 1" @click="enlargeImage(true)">
            <image :src="'/static/room_card_image/' + intros[selected_index].content" mode="widthFix"></image>
          </div>

          <div class="video-container" v-if="(intros[selected_index].type == 2)">
            <video
              :src="('https://oss.hkrin.com/3dsh/video/' + intros[selected_index].content)"></video>
          </div>
        </div>
      </view>

      <view class="bottom-container" v-if="(intros.length > 1)">
        <view @click="clickActionIndex(index)" v-for="(intro, index) in intros.slice(0, 2)">
          <view class="action-btn" v-if="intro.type == 0">
            文字
          </view>
          <view class="action-btn" v-if="intro.type == 1">
            图片
          </view>
          <view class="action-btn" v-if="intro.type == 2">
            视频
          </view>
        </view>
      </view>
    </view>
  </view>
  <div class="image-bg" v-if="showEnlarge" @click="enlargeImage(false)">
    <image  class="enlarge-image" mode="aspectFit" :src="'/static/room_card_image/' + intros[selected_index].content"></image>
  </div>
</template>

<script>
export default {
  name: "intro-card",
  props: {
    intros: {
      type: Array,
      default: [],
    },
    hasQuestions: {
      type: Boolean,
      default: false,
    },
    scene_name: {
      type: String,
      default: ""
    },
    scene_bg: {
      type: String,
      default: "sida_bg.png"
    }
  },
  data() {
    return {
      selected_index: 0,
      audio_on: true,
      audioContext: null,
      showEnlarge: false,
      bg_style: "background-image: url('https://oss.hkrin.com/other_img/card_bg/bridgt_bg.png');background-repeat: no-repeat;background-size: contain;"
    }
  },
  computed: {},
  methods: {
    enlargeImage(isEnlarge) {
      console.log('enlargeImage :',isEnlarge);
      this.showEnlarge = isEnlarge;
    },
    clickDismiss() {
      if (!this.hasQuestions) {
        this.$emit("clickClose");
        return;
      }
      uni.showModal({
        title: "提示",
        content: "还未完成答题，确定离开？",
        showCancel: true,
        success: (res) => {
          if (res.confirm) {
            this.$emit("clickClose");
          }
        }
      })

    },

    clickActionIndex(index) {
      console.log('clickActionIndex : ', index);
      if (this.selected_index == index) {
        return;
      }
      this.selected_index = index;
    },

    clickTest() {
      this.$emit('clickTest')
    },

    mute() {
      this.audio_on = false;
      this.audioContext.stop();
    },

    openSound() {
      this.audio_on = true;
      this.audioContext.src = 'https://oss.hkrin.com/audio/' + this.intros[this.selected_index].audio;
      this.audioContext.play();
    },

    makeAudio() {
      this.audioContext = uni.createInnerAudioContext();
      if (this.intros[this.selected_index].hasAudio) {
        this.openSound();
      }
    }
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    this.bg_style = "background-image: url('https://oss.hkrin.com/other_img/card_bg/" + this.scene_bg + "');background-repeat: no-repeat;background-size: contain;"
    this.makeAudio();
  },
  unmounted() {
    if (this.audioContext) {
      this.audioContext.stop();
      this.audioContext.destroy();
      this.audioContext = null;
    }
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() { },
  // 组件周期函数--监听组件数据更新之后
  updated() { },
  // 组件周期函数--监听组件激活(显示)
  activated() { },
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() { },
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() { },
}

</script>

<style lang="scss">

.image-bg {
  position: fixed;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.487);
  top: 0;
  left: 0;
}

.enlarge-image {
  width: 100%;
  height: 100%;

}

.intro-card-container {
  position: fixed;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scene-container {
  width: calc(656px * 0.8);
  height: calc(332px * 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.background-image {
  // position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}

.action-view {
  font-size: 14px;
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  width: 100%;

  .title-div {
    display: flex;
    flex-direction: row;
    align-items: center;

    .close-text {
      margin-left: 20px;
    }

    .sep {
      margin-left: 8px;
      font-size: 24px;

    }

    .scene-title {
      font-family: pangmen;
      margin-left: 10px;
      font-size: 22px;
      letter-spacing: 3px;
    }
  }

  image {
    margin-right: 30px;
    width: calc(100px);
  }
}

.control {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 100%;
  display: flex;
  flex-direction: row-reverse;

  div {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 9px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.493);

    image {
      width: 30px;
      height: 30px;
    }
  }
}

.content-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 30px;
  margin-top: 10px;

  .text-content-view {
    line-height: 23px;
    font-size: 17px;
    letter-spacing: 2px;
    color: white;
    font-weight: 900;
    width: calc((656px - 100px) * 0.8);
    height: calc((332px - 130px) * 0.8);
    overflow-y: auto;
    white-space: pre-wrap;
  }

  div::-webkit-scrollbar {
    display: none;
  }

  .image-container {
    width: 220px;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .video-container {
    width: calc((656px - 100px) * 0.8);
    height: calc((332px - 130px) * 0.8);
    display: flex;
    justify-content: center;

    video {
      // width: 100%;
      height: 100%;
    }
  }


}

.bottom-container {
  margin-top: 10px;
  display: flex;
  flex-direction: row;
  width: 250px;
  justify-content: space-around;

  .action-btn {
    background-color: white;
    padding: 3px 15px 3px 15px;
    color: #283E6A;
    font-weight: bold;
    font-size: 14px;
  }
}
</style>